﻿<script setup lang="ts" name="TagDetail">
import { getDetailData } from '@/api/list'
import { setPageTitle } from '@/utils/routerHelper'
import { storeToRefs } from 'pinia'
import XEUtils from 'xe-utils'
import { useAppStoreWithOut } from '@/store/modules/app'
import { useTagCacheStoreWithOut } from '@/store/modules/tag'

const appStore = useAppStoreWithOut()
const { systemConfig } = storeToRefs(appStore)
const { t } = useI18n() // 国际化
const route = useRoute()
const tagCacheStore = useTagCacheStoreWithOut()

const currentID = route.params?.id ?? -1
const initData: any = ref({})
const getInitData = (id) => {
  getDetailData({ id: id }, { config: { showLoading: false, mockEnable: true } }).then((res: any) => {
    if (res.data) {
      initData.value = res.data
      tagCacheStore.updateTitle(initData.value.title, route)
      console.log(initData.value)
    }
  })
}
onMounted(() => {
  getInitData(currentID)
})
onActivated(() => {
  setPageTitle(tagCacheStore.getCurrentRouterMeta(route.fullPath))
})
const value1 = ref('')
const typeList = ['', 'success', 'info', 'warning', 'danger']
</script>

<template>
  <PageWrap scroll>
    <el-space :size="systemConfig.space" fill direction="vertical">
      <el-card shadow="never" class="no-border no-radius">
        <el-alert title="详情页，带参页面打开可以设置为多开，多开页面后，相互之间不会有影响，并且多开页面的各个页面都可以做页面状态缓存。" type="success" :closable="false" show-icon />
        <el-input v-model="value1" clearable placeholder="请输入内容" />
        <div class="article">
          <h1>{{ initData.title }}</h1>
          <div class="line-info">
            <div class="num">
              <el-link :underline="false">
                <svg-icon class="el-icon--left" icon="ri:heart-fill" />
                {{ initData.like }}
              </el-link>
              <el-link :underline="false">
                <svg-icon class="el-icon--left" icon="ri:bookmark-3-fill" />
                {{ initData.collect }}
              </el-link>
              <el-link :underline="false">
                <svg-icon class="el-icon--left" icon="ri:chat-2-fill" />
                {{ initData.message }}
              </el-link>
              <el-link :underline="false">
                <svg-icon class="el-icon--left" icon="ri:user-fill" />
                {{ initData.author }}
              </el-link>
            </div>
            <div class="date">{{ initData.date }}</div>
          </div>
          <div class="line-tag">
            <el-tag v-for="(item, idx) in initData.tags" :key="idx" :type="(typeList[XEUtils.random(0, 4)]) as any">
              {{ item
              }}
            </el-tag>
          </div>
          <div class="content">
            <p>{{ initData.description }}</p>
            <p>
              <el-image :src="'https://cdn.jsdelivr.net/gh/kaivin/images/list/' + initData.type + '/' + initData.img + '.jpg'" fit="cover" lazy>
                <template #placeholder>
                  <div class="image-slot">
                    <div class="slot-content">
                      <svg-icon icon="ep:picture" />
                      <p>{{ t('common', 'loadingText') }}</p>
                    </div>
                  </div>
                </template>
                <template #error>
                  <div class="image-slot">
                    <div class="slot-content">
                      <svg-icon icon="ii:icon-image-failed" />
                      <p>{{ t('common', 'loadingFailed') }}</p>
                    </div>
                  </div>
                </template>
              </el-image>
            </p>
          </div>
        </div>
      </el-card>
    </el-space>
  </PageWrap>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.no-border {
  border: none;
}

.no-radius {
  border-radius: 0;
}

.el-alert {
  margin: 0 0 var(--el-space) 0;
}

.article {
  margin-top: 20px;

  h1 {
    font-size: calc(var(--el-font-size-extra-large) * 1.5);
    font-weight: bold;
    line-height: 2;
    text-align: center;
  }

  .line-info {
    display: flex;
    padding: 5px 0 10px;

    .num {
      flex: 1;

      .el-link {
        padding-right: 15px;
        color: var(--el-text-color-placeholder);
      }

      .el-link+.el-link {
        padding-left: 15px;
        border-left: 1px solid var(--el-border-color-light);
      }
    }

    .author {
      color: var(--el-text-color-placeholder);
    }

    .date {
      color: var(--el-text-color-placeholder);
    }
  }

  .line-tag {
    margin: 0 -5px;

    .el-tag {
      margin: 5px;
    }
  }

  .content {
    p {
      margin: 20px auto;
    }

    .el-image {
      display: block;
      max-width: 80%;
      margin: 0 auto;
    }
  }
}
</style>
